<template>
    <van-nav-bar title="评论详情" left-arrow @click-left="back" />
    <section class="aui-flexView">
      <!-- 订单详细 -->
      <section class="aui-scrollView">
        <!-- 订单状态 -->
        <div class="aui-pay-change">
          <div class="aui-flex">
            <div class="aui-flex-box">
              <h3>{{orderInfo.status_text}}</h3>
            </div>
            <div class="aui-pay-zfb">
              <img src="/assets/images/icon-zfb.png" alt="" />
            </div>
          </div>
        </div>

        <!-- 订单商品 -->
        <div class="aui-commodity-bg" v-for="item in orderInfo.product" :key="item.id" style="background: transparent">
          <div style="margin-bottom: 10px; background: #f5f5f5">
            <div class="aui-flex" >
              <div @click="clickThumb(item.product.id)" class="aui-commodity-img">
                <img :src="item.product.thumbs_text" />
              </div>
              <div class="aui-flex-box">
                <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
                <p>商品单价：￥{{ item.product.price }}</p>
                <span class="aui-barter-time">七天退换</span>
              </div>
              <div>
                <h5>￥{{ item.total }}</h5>
                <p class="aui-sml-text">X{{ item.pronum }}</p>
              </div>
            </div>
  
            <div style="text-align: right">
              <van-button @click="comment(item.id)" type="primary" size="mini" v-if="item.status == '0' && orderInfo.status == 3">评价</van-button>
            </div>
            <!-- 评价内容 -->
            <van-cell-group inset v-if="item.status == 1">
              <van-field label="评分">
                <template #input>
                  <van-rate  readonly v-model="item.rate" />
                </template>
              </van-field>
              <van-field
                v-model="item.comment"
                rows="2"
                autosize
                label="评价"
                type="textarea"
                maxlength="50"
                placeholder="请输入评价"
                show-word-limit
                readonly
              />
              <van-field>
                <template #input>
                  <van-uploader :show-upload="false" :deletable=false readonly v-model="item.proimg_text" multiple />
                </template>
              </van-field>
            </van-cell-group>
          </div>
        </div>
        <div class="divHeight b-line"></div>
      </section>
    </section>
</template>

<script setup>
import { onBeforeMount } from "vue";

    const {proxy} = getCurrentInstance();
    const back = () => proxy.$router.push("/order/index");

    onBeforeMount(()=>{
        getData()
    })

    // 点击商品图片
    const clickThumb = (proid) => {
        proxy.$router.push({
            path:"/product/detail",
            query:{proid}
        })
    }

    // 发送请求，获得订单信息
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{};
    const orderid = proxy.$route.query.orderid?proxy.$route.query.orderid:0
    let orderInfo = ref({
        express:{}
    });
    const getData = async () => {
        let data = {
            busid:userInfo.id,
            orderid:orderid
        }
        let result = await proxy.$POST({
            url:"/business/orderInfo",
            params:data
        })
        if(result.code){
          console.log(result.data)
            orderInfo.value = result.data
            result.data.product.forEach((element,index) => {
              orderInfo.value.product[index].rate = parseFloat(element.rate)
            });
            return false
        }else{
            proxy.$fail(result.msg);
            return false
        }
    }


// 评价
const comment = (orderProductId) => {
    proxy.$router.push({
        path:"/order/comment",
        query:{orderProductId,orderid}
    })
}
</script>

<style>
    @import url("/assets/css/info.css");
</style>